<template>
  <el-row class="IoSpeakingWriting-box">
    <el-col :span="24" class="IoSpeakingWriting-page">
      <div
        id="Memory"
        class="linePage ScaleCSSViewport_unzoom"
        v-loading="loading"
        element-loading-spinner="el-icon-loading"
        element-loading-background="#021033"
      ></div>
    </el-col>
    <el-col :span="24">
      <QMemory :data="propData" />
    </el-col>
  </el-row>
</template>>

<script>
import { fetchData } from "@/api/index.js";
import bus from "common/bus.js";
import { Area } from "@antv/g2plot";
import QMemory from "./basicInfo/Memory.vue";
export default {
  data() {
    return {
      selectedMonID: "",
      timerName: "ItemMonitorMemoeryAndIo",
      timerEventName: "timerItemMonitorMemoeryAndIo",
      timerInterval: 1000 * 120,

      timerChartName: "ItemMonitorMemoeryInfoChart",
      timerChartEventName: "timerItemMonitorMemoeryInfoChart",
      timerChartInterval: 1000 * 1,

      lineItem: "",
      lineData: [],
      read: "",
      loading: false,
      postData: {
        filters: {
          monid: "",
          ip: "",
        },
      },
      getNum: 120,
      dynamicDataTimer: "",
      propData: {},
      TotalData:[],
      areaWidth:Number((document.body.clientWidth / 2) - 100)
    };
  },
  components: { QMemory },
  props: { initData: null },
  created() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.initGetData();
      }
    });

    // bus.$emit("timerNewTodo", {
    //   name: this.timerChartName,
    //   eventName: this.timerChartEventName,
    //   interval: this.timerChartInterval,
    //   intervalNow: 0,
    // });

    // bus.$on(this.timerChartEventName, (msg) => {
      
    //     this.dynamicData();
      
    // });
  },
  mounted() {
    bus.$on("ItemMonitorInitChart", (msg) => {
      this.resetData();

      this.selectedMonID = msg[0].data.filter((item) => {
        return item.IP.includes(msg[1].IP);
      });
      this.clearTimer();
      bus.$emit("ITEMMONITORMEMORYLINE", {
        USE: "",
        TOTAL_GB: "",
        FREE_GB: "",
        USED_GB: "",
      });
      this.initGetData();
    });
    this.initLine();
  },
  computed: {},
  methods: {
    initGetData() {
      if (this.selectedMonID.length > 0) {
        let _postData = {
          opera: "MemoryUsageLine",
          filters: {
            monid: this.selectedMonID[0].MONID,
            pointNum: this.getNum,
          },
        };

        fetchData({
          postData: JSON.stringify(_postData),
        })
          .then((res) => {
            this.lineData = res.data.map((item) => {
              return {
                Date: item.RECORD_TIME,
                scales: Number((item.USED_PER * 100).toFixed(1)),
                TOTAL_GB: item.TOTAL_GB,

                FREE_GB: item.FREE_GB,
                USED_GB: item.USED_GB,
              };
            });
            this.dynamicData(this.lineData);
            // thisTotalData
          })
          .finally((_) => {
            // this.loading = false;
          });
      } else {
        this.lineItem.changeData([]);
      }
    },
    dynamicData() {
      let data = this.lineData
      if (this.dynamicDataTimers != "") {
        this.clearTimer();
      }
      if (data.length > 0) {
        this.dynamicDataTimer = setInterval((_) => {
          let item = data.shift();
          this.read = item.scales ? Number(item.scales.toFixed(1)) : 0;
          this.propData = {
            USE: this.read,
            TOTAL_GB: item.TOTAL_GB,
            FREE_GB: item.FREE_GB,
            USED_GB: item.USED_GB,
          };
          bus.$emit("ITEMMONITORMEMORYLINE", this.propData);
          data.push(item);
          this.lineItem.changeData(data);



        }, 1000);

        
          
        
      }
    },

    resetData() {
      if (this.lineData.length > 0) {
        this.lineItem.changeData([]);
      }
      this.lineData = [];
      this.read = "";
      this.propData = {};
    },
    initLine() {
      this.lineItem = new Area("Memory", {
        data: this.lineData,
        padding: "auto",
        xField: "Date",
        yField: "scales",
        height: 220,
        // width: this.areaWidth,
        meta: {
          scales: {
            min: 0,
            max: 100,
          },
        },
        xAxis: false,
        areaStyle: () => {
          return {
            fill: "l(270) 0:#ffffff 0.5:#7ec2f3 1:#FF0000",
          };
        },

        tooltip: {
          formatter: (datum) => {
            return { name: "使用率", value: datum.scales + "%" };
          },
        },
      });

      this.lineItem.render();
    },
    clearTimer() {
      clearInterval(this.dynamicDataTimer);
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });
    bus.$emit("timerNewTodo", {
      name: this.timerChartName,
    });
    this.resetData();
    this.lineItem.destroy();
    // this.clearTimer();
    bus.$off("ItemMonitorInitChart");
  },
};
</script>
<style scoped>
.IoSpeakingWriting-box {
  /* height: 500px; */
  /* border: 1px solid black; */
  /* box-shadow: 0 0 15px #5c5f61;
  border-radius: 5px; */
  padding: 15px;
  width: 100%;
}
.IoSpeakingWriting-page {
  height: 90%;
  width: 100%;
}
.linePage {
  height: 100%;
  width: 100%;
}
.IoSpeakingWriting-file {
  height: 10%;
  width: 100%;
  text-align: center;
}
.itemName {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}
</style>